<template>
    <!-- 月份明细 table -->
    <hsTableV2 isMultistageHeader :columns="tableData.cloumns" :data="tableData.data" :expendList="expandedRowKeys" isTree
        fixed expandColumnKey="id" :multistageHeaderData="multistageData">
        <!-- <template #headerSlot="props">
            <CustomizedHeader v-bind="props" />
        </template> -->
    </hsTableV2>
</template>

<script setup lang="jsx">
import { ref, reactive, computed, watch } from 'vue'
import detailApi from '@/api/SelfSupport/detailPages'
import { toThousands } from '@/utils/number-util'
import { useRouter } from 'vue-router'
const router = useRouter()

const props = defineProps({
    biProjectCode: {
        type: String,
        required: true,
        default: ''
    },
    year: {
        type: String,
        required: true,
        default: ''
    },
    isFresh: {
        type: String,
        required: true,
        default: ''
    }
})

let multistageData = {}
const initMultistageData = () => {
    let month = 1
    let colNum = 1
    for (let i = 0, len = 38; i < len; i++) {
        if ((i + 1 - 2) % 3 === 1) {
            multistageData[`multCol${colNum}`] = {
                key: `multCol${colNum}`,
                title: `${props.year}年${month}月`,
                childrenIndex: [i, i+1, i+2]
            }
            colNum = colNum + 1
            i = i + 2
            month++
        }
    }
}
initMultistageData()
const windowWidth = document.documentElement.scrollWidth;
const celWidth = (windowWidth - 138 - 300) / 14
let tableData = reactive({
    loading: false,
    data: [],
    cloumns: [
        {
            key: "id",
            dataKey: "id",
            title: "序号",
            align: "left",
            width: 100,
            fixed: true
        },
        {
            key: "subjectName",
            dataKey: "subjectName",
            title: "科目",
            align: "left",
            width: 200,
            fixed: true,
            indentKey: 'level', // 设置缩进字段
            cellRenderer: ({ rowData }) => (
                <div style={{ display: 'flex'}}>
                    <div style={{ width: `${12*(rowData.level-1)}px`}}></div>
                    <div>{rowData.subjectName}</div>
                </div>
            )
        },
        // 1
        {
            key: "januaryBudget1",
            dataKey: "januaryBudget1",
            title: "预算",
            align: "right",
            width: celWidth,
            parentKey: 'multCol1',
            cellRenderer: ({ rowData }) => (
                <ElTooltip content={toThousands(rowData.januaryBudget2)} placement="top">{toThousands(rowData.januaryBudget1)}</ElTooltip>
            )
        },
        {
            key: "januaryActual1",
            dataKey: "januaryActual1",
            title: "实际",
            align: "right",
            width: celWidth,
            parentKey: 'multCol1',
            cellRenderer: ({ rowData }) => (
                <ElTooltip content={toThousands(rowData.januaryActual2)} placement="top">{toThousands(rowData.januaryActual1)}</ElTooltip>
            )
        },
        {
            key: "januaryRate1",
            dataKey: "januaryRate1",
            title: "完成率",
            align: "right",
            width: celWidth,
            parentKey: 'multCol1',
            cellRenderer: ({ rowData }) => (
                <ElTooltip content={rowData.januaryRate2 == '-' ? '-' : `${toThousands(rowData.januaryRate2)}%`} placement="top">{rowData.januaryRate1 == '-' ? '-' : `${toThousands(rowData.januaryRate1)}%`}</ElTooltip>
            )
        },
        // 2
        {
            key: "februaryBudget1",
            dataKey: "februaryBudget1",
            title: "预算",
            align: "right",
            width: celWidth,
            parentKey: 'multCol2',
            cellRenderer: ({ rowData }) => (
                <ElTooltip content={toThousands(rowData.februaryBudget2)} placement="top">{toThousands(rowData.februaryBudget1)}</ElTooltip>
            )
        },
        {
            key: "februaryActual1",
            dataKey: "februaryActual1",
            title: "实际",
            align: "right",
            width: celWidth,
            parentKey: 'multCol2',
            cellRenderer: ({ rowData }) => (
                <ElTooltip content={toThousands(rowData.februaryActual2)} placement="top">{toThousands(rowData.februaryActual1)}</ElTooltip>
            )
        },
        {
            key: "februaryRate1",
            dataKey: "februaryRate1",
            title: "完成率",
            align: "right",
            width: celWidth,
            parentKey: 'multCol2',
            cellRenderer: ({ rowData }) => (
                <ElTooltip content={rowData.februaryRate2 == '-' ? '-' : `${toThousands(rowData.februaryRate2)}%`} placement="top">{rowData.februaryRate1 == '-' ? '-' : `${toThousands(rowData.februaryRate1)}%`}</ElTooltip>
            )
        },
        // 3
        {
            key: "marchBudget1",
            dataKey: "marchBudget1",
            title: "预算",
            align: "right",
            width: celWidth,
            parentKey: 'multCol3',
            cellRenderer: ({ rowData }) => (
                <ElTooltip content={toThousands(rowData.marchBudget2)} placement="top">{toThousands(rowData.marchBudget1)}</ElTooltip>
            )
        },
        {
            key: "marchActual1",
            dataKey: "marchActual1",
            title: "实际",
            align: "right",
            width: celWidth,
            parentKey: 'multCol3',
            cellRenderer: ({ rowData }) => (
                <ElTooltip content={toThousands(rowData.marchActual2)} placement="top">{toThousands(rowData.marchActual1)}</ElTooltip>
            )
        },
        {
            key: "marchRate1",
            dataKey: "marchRate1",
            title: "完成率",
            align: "right",
            width: celWidth,
            parentKey: 'multCol3',
            cellRenderer: ({ rowData }) => (
                <ElTooltip content={rowData.marchRate2 == '-' ? '-' : `${toThousands(rowData.marchRate2)}%`} placement="top">{rowData.marchRate1 == '-' ? '-' : `${toThousands(rowData.marchRate1)}%`}</ElTooltip>
            )
        },
        // 4
        {
            key: "aprilBudget1",
            dataKey: "aprilBudget1",
            title: "预算",
            align: "right",
            width: celWidth,
            parentKey: 'multCol4',
            cellRenderer: ({ rowData }) => (
                <ElTooltip content={toThousands(rowData.aprilBudget2)} placement="top">{toThousands(rowData.aprilBudget1)}</ElTooltip>
            )
        },
        {
            key: "aprilActual1",
            dataKey: "aprilActual1",
            title: "实际",
            align: "right",
            width: celWidth,
            parentKey: 'multCol4',
            cellRenderer: ({ rowData }) => (
                <ElTooltip content={toThousands(rowData.aprilActual2)} placement="top">{toThousands(rowData.aprilActual1)}</ElTooltip>
            )
        },
        {
            key: "aprilRate1",
            dataKey: "aprilRate1",
            title: "完成率",
            align: "right",
            width: celWidth,
            parentKey: 'multCol4',
            cellRenderer: ({ rowData }) => (
                <ElTooltip content={rowData.aprilRate2 == '-' ? '-' : `${toThousands(rowData.aprilRate2)}%`} placement="top">{rowData.aprilRate1 == '-' ? '-' : `${toThousands(rowData.aprilRate1)}%`}</ElTooltip>
            )
        },
        // 5
        {
            key: "mayBudget1",
            dataKey: "mayBudget1",
            title: "预算",
            align: "right",
            width: celWidth,
            parentKey: 'multCol5',
            cellRenderer: ({ rowData }) => (
                <ElTooltip content={toThousands(rowData.mayBudget2)} placement="top">{toThousands(rowData.mayBudget1)}</ElTooltip>
            )
        },
        {
            key: "mayActual1",
            dataKey: "mayActual1",
            title: "实际",
            align: "right",
            width: celWidth,
            parentKey: 'multCol5',
            cellRenderer: ({ rowData }) => (
                <ElTooltip content={toThousands(rowData.mayActual2)} placement="top">{toThousands(rowData.mayActual1)}</ElTooltip>
            )
        },
        {
            key: "mayRate1",
            dataKey: "mayRate1",
            title: "完成率",
            align: "right",
            width: celWidth,
            parentKey: 'multCol5',
            cellRenderer: ({ rowData }) => (
                <ElTooltip content={rowData.mayRate2 == '-' ? '-' : `${toThousands(rowData.mayRate2)}%`} placement="top">{rowData.mayRate1 == '-' ? '-' : `${toThousands(rowData.mayRate1)}%`}</ElTooltip>
            )
        },
        // 6
        {
            key: "juneBudget1",
            dataKey: "juneBudget1",
            title: "预算",
            align: "right",
            width: celWidth,
            parentKey: 'multCol6',
            cellRenderer: ({ rowData }) => (
                <ElTooltip content={toThousands(rowData.juneBudget2)} placement="top">{toThousands(rowData.juneBudget1)}</ElTooltip>
            )
        },
        {
            key: "juneActual1",
            dataKey: "juneActual1",
            title: "实际",
            align: "right",
            width: celWidth,
            parentKey: 'multCol6',
            cellRenderer: ({ rowData }) => (
                <ElTooltip content={toThousands(rowData.juneActual2)} placement="top">{toThousands(rowData.juneActual1)}</ElTooltip>
            )
        },
        {
            key: "juneRate1",
            dataKey: "juneRate1",
            title: "完成率",
            align: "right",
            width: celWidth,
            parentKey: 'multCol6',
            cellRenderer: ({ rowData }) => (
                <ElTooltip content={rowData.juneRate2 == '-' ? '-' : `${toThousands(rowData.juneRate2)}%`} placement="top">{rowData.juneRate1 == '-' ? '-' : `${toThousands(rowData.juneRate1)}%`}</ElTooltip>
            )
        },
        // 7
        {
            key: "julyBudget1",
            dataKey: "julyBudget1",
            title: "预算",
            align: "right",
            width: celWidth,
            parentKey: 'multCol7',
            cellRenderer: ({ rowData }) => (
                <ElTooltip content={toThousands(rowData.julyBudget2)} placement="top">{toThousands(rowData.julyBudget1)}</ElTooltip>
            )
        },
        {
            key: "julyActual1",
            dataKey: "julyActual1",
            title: "实际",
            align: "right",
            width: celWidth,
            parentKey: 'multCol7',
            cellRenderer: ({ rowData }) => (
                <ElTooltip content={toThousands(rowData.julyActual2)} placement="top">{toThousands(rowData.julyActual1)}</ElTooltip>
            )
        },
        {
            key: "julyRate1",
            dataKey: "julyRate1",
            title: "完成率",
            align: "right",
            width: celWidth,
            parentKey: 'multCol7',
            cellRenderer: ({ rowData }) => (
                <ElTooltip content={rowData.julyRate2 == '-' ? '-' : `${toThousands(rowData.julyRate2)}%`} placement="top">{rowData.julyRate1 == '-' ? '-' : `${toThousands(rowData.julyRate1)}%`}</ElTooltip>
            )
        },
        // 8
        {
            key: "augustBudget1",
            dataKey: "augustBudget1",
            title: "预算",
            align: "right",
            width: celWidth,
            parentKey: 'multCol8',
            cellRenderer: ({ rowData }) => (
                <ElTooltip content={toThousands(rowData.augustBudget2)} placement="top">{toThousands(rowData.augustBudget1)}</ElTooltip>
            )
        },
        {
            key: "augustActual1",
            dataKey: "augustActual1",
            title: "实际",
            align: "right",
            width: celWidth,
            parentKey: 'multCol8',
            cellRenderer: ({ rowData }) => (
                <ElTooltip content={toThousands(rowData.augustActual2)} placement="top">{toThousands(rowData.augustActual1)}</ElTooltip>
            )
        },
        {
            key: "augustRate1",
            dataKey: "augustRate1",
            title: "完成率",
            align: "right",
            width: celWidth,
            parentKey: 'multCol8',
            cellRenderer: ({ rowData }) => (
                <ElTooltip content={rowData.augustRate2 == '-' ? '-' : `${toThousands(rowData.augustRate2)}%`} placement="top">{rowData.augustRate1 == '-' ? '-' : `${toThousands(rowData.augustRate1)}%`}</ElTooltip>
            )
        },
        // 9
        {
            key: "septemberBudget1",
            dataKey: "septemberBudget1",
            title: "预算",
            align: "right",
            width: celWidth,
            parentKey: 'multCol9',
            cellRenderer: ({ rowData }) => (
                <ElTooltip content={toThousands(rowData.septemberBudget2)} placement="top">{toThousands(rowData.septemberBudget1)}</ElTooltip>
            )
        },
        {
            key: "septemberActual1",
            dataKey: "septemberActual1",
            title: "实际",
            align: "right",
            width: celWidth,
            parentKey: 'multCol9',
            cellRenderer: ({ rowData }) => (
                <ElTooltip content={toThousands(rowData.septemberActual2)} placement="top">{toThousands(rowData.septemberActual1)}</ElTooltip>
            )
        },
        {
            key: "septemberRate1",
            dataKey: "septemberRate1",
            title: "完成率",
            align: "right",
            width: celWidth,
            parentKey: 'multCol9',
            cellRenderer: ({ rowData }) => (
                <ElTooltip content={rowData.septemberRate2 == '-' ? '-' : `${toThousands(rowData.septemberRate2)}%`} placement="top">{rowData.septemberRate1 == '-' ? '-' : `${toThousands(rowData.septemberRate1)}%`}</ElTooltip>
            )
        },
        // 10
        {
            key: "octBudget1",
            dataKey: "octBudget1",
            title: "预算",
            align: "right",
            width: celWidth,
            parentKey: 'multCol10',
            cellRenderer: ({ rowData }) => (
                <ElTooltip content={toThousands(rowData.octBudget2)} placement="top">{toThousands(rowData.octBudget1)}</ElTooltip>
            )
        },
        {
            key: "octActual1",
            dataKey: "octActual1",
            title: "实际",
            align: "right",
            width: celWidth,
            parentKey: 'multCol10',
            cellRenderer: ({ rowData }) => (
                <ElTooltip content={toThousands(rowData.octActual2)} placement="top">{toThousands(rowData.octActual1)}</ElTooltip>
            )
        },
        {
            key: "octRate1",
            dataKey: "octRate1",
            title: "完成率",
            align: "right",
            width: celWidth,
            parentKey: 'multCol10',
            cellRenderer: ({ rowData }) => (
                <ElTooltip content={rowData.octRate2 == '-' ? '-' : `${toThousands(rowData.octRate2)}%`} placement="top">{rowData.octRate1 == '-' ? '-' : `${toThousands(rowData.octRate1)}%`}</ElTooltip>
            )
        },
        // 11
        {
            key: "novemberBudget1",
            dataKey: "novemberBudget1",
            title: "预算",
            align: "right",
            width: celWidth,
            parentKey: 'multCol11',
            cellRenderer: ({ rowData }) => (
                <ElTooltip content={toThousands(rowData.novemberBudget2)} placement="top">{toThousands(rowData.novemberBudget1)}</ElTooltip>
            )
        },
        {
            key: "novemberActual1",
            dataKey: "novemberActual1",
            title: "实际",
            align: "right",
            width: celWidth,
            parentKey: 'multCol11',
            cellRenderer: ({ rowData }) => (
                <ElTooltip content={toThousands(rowData.novembertActual2)} placement="top">{toThousands(rowData.novemberActual1)}</ElTooltip>
            )
        },
        {
            key: "novemberRate1",
            dataKey: "novemberRate1",
            title: "完成率",
            align: "right",
            width: celWidth,
            parentKey: 'multCol11',
            cellRenderer: ({ rowData }) => (
                <ElTooltip content={rowData.novemberRate2 == '-' ? '-' : `${toThousands(rowData.novemberRate2)}%`} placement="top">{rowData.novemberRate1 == '-' ? '-' : `${toThousands(rowData.novemberRate1)}%`}</ElTooltip>
            )
        },
        // 12
        {
            key: "decBudget1",
            dataKey: "decBudget1",
            title: "预算",
            align: "right",
            width: celWidth,
            parentKey: 'multCol12',
            cellRenderer: ({ rowData }) => (
                <ElTooltip content={toThousands(rowData.decBudget2)} placement="top">{toThousands(rowData.decBudget1)}</ElTooltip>
            )
        },
        {
            key: "decActual1",
            dataKey: "decActual1",
            title: "实际",
            align: "right",
            width: celWidth,
            parentKey: 'multCol12',
            cellRenderer: ({ rowData }) => (
                <ElTooltip content={toThousands(rowData.decActual2)} placement="top">{toThousands(rowData.decActual1)}</ElTooltip>
            )
        },
        {
            key: "decRate1",
            dataKey: "decRate1",
            title: "完成率",
            align: "right",
            width: celWidth,
            parentKey: 'multCol12',
            cellRenderer: ({ rowData }) => (
                <ElTooltip content={rowData.decRate2 == '-' ? '-' : `${toThousands(rowData.decRate2)}%`} placement="top">{rowData.decRate1 == '-' ? '-' : `${toThousands(rowData.decRate1)}%`}</ElTooltip>
            )
        }
    ],
})




const biProjectCode = computed(() => {
    return props.biProjectCode
});
const year = computed(() => {
    return props.year
});

const isFresh = computed(() => {
    return props.isFresh
});

watch([biProjectCode, year, isFresh], () => {
    initMultistageData()
    getList()
}, { deep: true });

// 设置虚拟表格滚动
const tableRefMonth = ref()
watch(() => router.currentRoute.value, () => {
    tableRefMonth.value?.scrollToTop(0)
})

let expandedRowKeys = ref([])
const convertToFlatArray = (arr) => {
    arr.map(item => {
        // item.lastStage = item.children ? 0 : 1 // 设置:是否为最后一级
        item.lastStage = 0 // 设置:是否为最后一级
        item.curParentIndex = item.id.split('.')[0] - 1 // 设置统一的第一级index， 用于斑马纹
        item.level == 1 || item.level ==  2 ? expandedRowKeys.value.push(item.id) : '' // 第一级 第二级 默认展开
        if (Array.isArray(item.children)) {
            convertToFlatArray(item.children);
        }
        return item
    })
}

const getList = () => {
    tableData.loading = true
    detailApi.monthDetailApi({ biProjectCode: props.biProjectCode, year: props.year }).then((res) => {
        if (res.data.code == 200) {
            convertToFlatArray(res.data.data)
            tableData.data = res.data.data
            tableData.loading = false
        }
    })
}

getList()
</script>

<style scoped lang="scss"></style>




<!-- <template>
    <el-auto-resizer>
        <template #default="{ height, width }">
            <el-table-v2 ref="tableRefMonth" :default-expanded-row-keys="expandedRowKeys" :expand-column-key="expandColumnKey"
                v-loading="tableData.loading" class="zs-el-table-v2" :row-height="36" :header-height="72"
                :row-class="tableData.rowClass" header-class="zs-el-table-v2-header" :columns="tableData.cloumns"
                :data="tableData.data" :width="width" :height="height" fixed>
                <template #header="props">
                    <CustomizedHeader v-bind="props" />
                </template>
            </el-table-v2>
        </template>
    </el-auto-resizer>
</template>

<script setup lang="jsx">
import { ref, reactive, computed, watch } from 'vue'
import detailApi from '@/api/SelfSupport/detailPages'
import { toThousands } from '@/utils/number-util'
import { useRouter } from 'vue-router'
const router = useRouter()

const props = defineProps({
    biProjectCode: {
        type: String,
        required: true,
        default: ''
    },
    year: {
        type: String,
        required: true,
        default: ''
    },
    isFresh: {
        type: String,
        required: true,
        default: ''
    }
})
let expandedRowKeys = ref([])



const biProjectCode = computed(() => {
    return props.biProjectCode
});
const year = computed(() => {
    return props.year
});

const isFresh = computed(() => {
    return props.isFresh
});

watch([biProjectCode, year, isFresh], () => {
    getList()
}, { deep: true });

// 设置虚拟表格滚动
const tableRefMonth = ref()
watch(() => router.currentRoute.value, () => {
    tableRefMonth.value?.scrollToTop(0)
})

const expandColumnKey = 'id'
let tableData = reactive({
    loading: false,
    data: [],
    total: 0,
    cloumns: [
        {
            key: "id",
            dataKey: "id",
            title: "序号",
            align: "left",
            width: 200,
            cellRenderer: ({ rowData }) => (
                <span class={rowData.children ? '' : 'zs-text-gray'}>{rowData.id}</span>
            )
        },
        {
            key: "subjectName",
            dataKey: "subjectName",
            title: "科目（万元，不含税）",
            align: "left",
            width: 250,
            cellRenderer: ({ rowData }) => (
                <div style={{ display: 'flex'}}>
                    <div style={{ width: `${12*(rowData.level-1)}px`}}></div>
                    <div>{rowData.subjectName}</div>
                </div>
            )
        },
        // 1
        {
            key: "januaryBudget1",
            dataKey: "januaryBudget1",
            title: "预算",
            align: "right",
            width: 120,
            cellRenderer: ({ rowData }) => (
                <ElTooltip content={toThousands(rowData.januaryBudget2)} placement="top">{toThousands(rowData.januaryBudget1)}</ElTooltip>
            )
        },
        {
            key: "januaryActual1",
            dataKey: "januaryActual1",
            title: "实际",
            align: "right",
            width: 120,
            cellRenderer: ({ rowData }) => (
                <ElTooltip content={toThousands(rowData.januaryActual2)} placement="top">{toThousands(rowData.januaryActual1)}</ElTooltip>
            )
        },
        {
            key: "januaryRate1",
            dataKey: "januaryRate1",
            title: "完成率",
            align: "right",
            width: 120,
            cellRenderer: ({ rowData }) => (
                <ElTooltip content={rowData.januaryRate2 == '-' ? '-' : `${toThousands(rowData.januaryRate2)}%`} placement="top">{rowData.januaryRate1 == '-' ? '-' : `${toThousands(rowData.januaryRate1)}%`}</ElTooltip>
            )
        },
        // 2
        {
            key: "februaryBudget1",
            dataKey: "februaryBudget1",
            title: "预算",
            align: "right",
            width: 120,
            cellRenderer: ({ rowData }) => (
                <ElTooltip content={toThousands(rowData.februaryBudget2)} placement="top">{toThousands(rowData.februaryBudget1)}</ElTooltip>
            )
        },
        {
            key: "februaryActual1",
            dataKey: "februaryActual1",
            title: "实际",
            align: "right",
            width: 120,
            cellRenderer: ({ rowData }) => (
                <ElTooltip content={toThousands(rowData.februaryActual2)} placement="top">{toThousands(rowData.februaryActual1)}</ElTooltip>
            )
        },
        {
            key: "februaryRate1",
            dataKey: "februaryRate1",
            title: "完成率",
            align: "right",
            width: 120,
            cellRenderer: ({ rowData }) => (
                <ElTooltip content={rowData.februaryRate2 == '-' ? '-' : `${toThousands(rowData.februaryRate2)}%`} placement="top">{rowData.februaryRate1 == '-' ? '-' : `${toThousands(rowData.februaryRate1)}%`}</ElTooltip>
            )
        },
        // 3
        {
            key: "marchBudget1",
            dataKey: "marchBudget1",
            title: "预算",
            align: "right",
            width: 120,
            cellRenderer: ({ rowData }) => (
                <ElTooltip content={toThousands(rowData.marchBudget2)} placement="top">{toThousands(rowData.marchBudget1)}</ElTooltip>
            )
        },
        {
            key: "marchActual1",
            dataKey: "marchActual1",
            title: "实际",
            align: "right",
            width: 120,
            cellRenderer: ({ rowData }) => (
                <ElTooltip content={toThousands(rowData.marchActual2)} placement="top">{toThousands(rowData.marchActual1)}</ElTooltip>
            )
        },
        {
            key: "marchRate1",
            dataKey: "marchRate1",
            title: "完成率",
            align: "right",
            width: 120,
            cellRenderer: ({ rowData }) => (
                <ElTooltip content={rowData.marchRate2 == '-' ? '-' : `${toThousands(rowData.marchRate2)}%`} placement="top">{rowData.marchRate1 == '-' ? '-' : `${toThousands(rowData.marchRate1)}%`}</ElTooltip>
            )
        },
        // 4
        {
            key: "aprilBudget1",
            dataKey: "aprilBudget1",
            title: "预算",
            align: "right",
            width: 120,
            cellRenderer: ({ rowData }) => (
                <ElTooltip content={toThousands(rowData.aprilBudget2)} placement="top">{toThousands(rowData.aprilBudget1)}</ElTooltip>
            )
        },
        {
            key: "aprilActual1",
            dataKey: "aprilActual1",
            title: "实际",
            align: "right",
            width: 120,
            cellRenderer: ({ rowData }) => (
                <ElTooltip content={toThousands(rowData.aprilActual2)} placement="top">{toThousands(rowData.aprilActual1)}</ElTooltip>
            )
        },
        {
            key: "aprilRate1",
            dataKey: "aprilRate1",
            title: "完成率",
            align: "right",
            width: 120,
            cellRenderer: ({ rowData }) => (
                <ElTooltip content={rowData.aprilRate2 == '-' ? '-' : `${toThousands(rowData.aprilRate2)}%`} placement="top">{rowData.aprilRate1 == '-' ? '-' : `${toThousands(rowData.aprilRate1)}%`}</ElTooltip>
            )
        },
        // 5
        {
            key: "mayBudget1",
            dataKey: "mayBudget1",
            title: "预算",
            align: "right",
            width: 120,
            cellRenderer: ({ rowData }) => (
                <ElTooltip content={toThousands(rowData.mayBudget2)} placement="top">{toThousands(rowData.mayBudget1)}</ElTooltip>
            )
        },
        {
            key: "mayActual1",
            dataKey: "mayActual1",
            title: "实际",
            align: "right",
            width: 120,
            cellRenderer: ({ rowData }) => (
                <ElTooltip content={toThousands(rowData.mayActual2)} placement="top">{toThousands(rowData.mayActual1)}</ElTooltip>
            )
        },
        {
            key: "mayRate1",
            dataKey: "mayRate1",
            title: "完成率",
            align: "right",
            width: 120,
            cellRenderer: ({ rowData }) => (
                <ElTooltip content={rowData.mayRate2 == '-' ? '-' : `${toThousands(rowData.mayRate2)}%`} placement="top">{rowData.mayRate1 == '-' ? '-' : `${toThousands(rowData.mayRate1)}%`}</ElTooltip>
            )
        },
        // 6
        {
            key: "juneBudget1",
            dataKey: "juneBudget1",
            title: "预算",
            align: "right",
            width: 120,
            cellRenderer: ({ rowData }) => (
                <ElTooltip content={toThousands(rowData.juneBudget2)} placement="top">{toThousands(rowData.juneBudget1)}</ElTooltip>
            )
        },
        {
            key: "juneActual1",
            dataKey: "juneActual1",
            title: "实际",
            align: "right",
            width: 120,
            cellRenderer: ({ rowData }) => (
                <ElTooltip content={toThousands(rowData.juneActual2)} placement="top">{toThousands(rowData.juneActual1)}</ElTooltip>
            )
        },
        {
            key: "juneRate1",
            dataKey: "juneRate1",
            title: "完成率",
            align: "right",
            width: 120,
            cellRenderer: ({ rowData }) => (
                <ElTooltip content={rowData.juneRate2 == '-' ? '-' : `${toThousands(rowData.juneRate2)}%`} placement="top">{rowData.juneRate1 == '-' ? '-' : `${toThousands(rowData.juneRate1)}%`}</ElTooltip>
            )
        },
        // 7
        {
            key: "julyBudget1",
            dataKey: "julyBudget1",
            title: "预算",
            align: "right",
            width: 120,
            cellRenderer: ({ rowData }) => (
                <ElTooltip content={toThousands(rowData.julyBudget2)} placement="top">{toThousands(rowData.julyBudget1)}</ElTooltip>
            )
        },
        {
            key: "julyActual1",
            dataKey: "julyActual1",
            title: "实际",
            align: "right",
            width: 120,
            cellRenderer: ({ rowData }) => (
                <ElTooltip content={toThousands(rowData.julyActual2)} placement="top">{toThousands(rowData.julyActual1)}</ElTooltip>
            )
        },
        {
            key: "julyRate1",
            dataKey: "julyRate1",
            title: "完成率",
            align: "right",
            width: 120,
            cellRenderer: ({ rowData }) => (
                <ElTooltip content={rowData.julyRate2 == '-' ? '-' : `${toThousands(rowData.julyRate2)}%`} placement="top">{rowData.julyRate1 == '-' ? '-' : `${toThousands(rowData.julyRate1)}%`}</ElTooltip>
            )
        },
        // 8
        {
            key: "augustBudget1",
            dataKey: "augustBudget1",
            title: "预算",
            align: "right",
            width: 120,
            cellRenderer: ({ rowData }) => (
                <ElTooltip content={toThousands(rowData.augustBudget2)} placement="top">{toThousands(rowData.augustBudget1)}</ElTooltip>
            )
        },
        {
            key: "augustActual1",
            dataKey: "augustActual1",
            title: "实际",
            align: "right",
            width: 120,
            cellRenderer: ({ rowData }) => (
                <ElTooltip content={toThousands(rowData.augustActual2)} placement="top">{toThousands(rowData.augustActual1)}</ElTooltip>
            )
        },
        {
            key: "augustRate1",
            dataKey: "augustRate1",
            title: "完成率",
            align: "right",
            width: 120,
            cellRenderer: ({ rowData }) => (
                <ElTooltip content={rowData.augustRate2 == '-' ? '-' : `${toThousands(rowData.augustRate2)}%`} placement="top">{rowData.augustRate1 == '-' ? '-' : `${toThousands(rowData.augustRate1)}%`}</ElTooltip>
            )
        },
        // 9
        {
            key: "septemberBudget1",
            dataKey: "septemberBudget1",
            title: "预算",
            align: "right",
            width: 120,
            cellRenderer: ({ rowData }) => (
                <ElTooltip content={toThousands(rowData.septemberBudget2)} placement="top">{toThousands(rowData.septemberBudget1)}</ElTooltip>
            )
        },
        {
            key: "septemberActual1",
            dataKey: "septemberActual1",
            title: "实际",
            align: "right",
            width: 120,
            cellRenderer: ({ rowData }) => (
                <ElTooltip content={toThousands(rowData.septemberActual2)} placement="top">{toThousands(rowData.septemberActual1)}</ElTooltip>
            )
        },
        {
            key: "septemberRate1",
            dataKey: "septemberRate1",
            title: "完成率",
            align: "right",
            width: 120,
            cellRenderer: ({ rowData }) => (
                <ElTooltip content={rowData.septemberRate2 == '-' ? '-' : `${toThousands(rowData.septemberRate2)}%`} placement="top">{rowData.septemberRate1 == '-' ? '-' : `${toThousands(rowData.septemberRate1)}%`}</ElTooltip>
            )
        },
        // 10
        {
            key: "octBudget1",
            dataKey: "octBudget1",
            title: "预算",
            align: "right",
            width: 120,
            cellRenderer: ({ rowData }) => (
                <ElTooltip content={toThousands(rowData.octBudget2)} placement="top">{toThousands(rowData.octBudget1)}</ElTooltip>
            )
        },
        {
            key: "octActual1",
            dataKey: "octActual1",
            title: "实际",
            align: "right",
            width: 120,
            cellRenderer: ({ rowData }) => (
                <ElTooltip content={toThousands(rowData.octActual2)} placement="top">{toThousands(rowData.octActual1)}</ElTooltip>
            )
        },
        {
            key: "octRate1",
            dataKey: "octRate1",
            title: "完成率",
            align: "right",
            width: 120,
            cellRenderer: ({ rowData }) => (
                <ElTooltip content={rowData.octRate2 == '-' ? '-' : `${toThousands(rowData.octRate2)}%`} placement="top">{rowData.octRate1 == '-' ? '-' : `${toThousands(rowData.octRate1)}%`}</ElTooltip>
            )
        },
        // 11
        {
            key: "novemberBudget1",
            dataKey: "novemberBudget1",
            title: "预算",
            align: "right",
            width: 120,
            cellRenderer: ({ rowData }) => (
                <ElTooltip content={toThousands(rowData.novemberBudget2)} placement="top">{toThousands(rowData.novemberBudget1)}</ElTooltip>
            )
        },
        {
            key: "novemberActual1",
            dataKey: "novemberActual1",
            title: "实际",
            align: "right",
            width: 120,
            cellRenderer: ({ rowData }) => (
                <ElTooltip content={toThousands(rowData.novembertActual2)} placement="top">{toThousands(rowData.novemberActual1)}</ElTooltip>
            )
        },
        {
            key: "novemberRate1",
            dataKey: "novemberRate1",
            title: "完成率",
            align: "right",
            width: 120,
            cellRenderer: ({ rowData }) => (
                <ElTooltip content={rowData.novemberRate2 == '-' ? '-' : `${toThousands(rowData.novemberRate2)}%`} placement="top">{rowData.novemberRate1 == '-' ? '-' : `${toThousands(rowData.novemberRate1)}%`}</ElTooltip>
            )
        },
        // 12
        {
            key: "decBudget1",
            dataKey: "decBudget1",
            title: "预算",
            align: "right",
            width: 120,
            cellRenderer: ({ rowData }) => (
                <ElTooltip content={toThousands(rowData.decBudget2)} placement="top">{toThousands(rowData.decBudget1)}</ElTooltip>
            )
        },
        {
            key: "decActual1",
            dataKey: "decActual1",
            title: "实际",
            align: "right",
            width: 120,
            cellRenderer: ({ rowData }) => (
                <ElTooltip content={toThousands(rowData.decActual2)} placement="top">{toThousands(rowData.decActual1)}</ElTooltip>
            )
        },
        {
            key: "decRate1",
            dataKey: "decRate1",
            title: "完成率",
            align: "right",
            width: 120,
            cellRenderer: ({ rowData }) => (
                <ElTooltip content={rowData.decRate2 == '-' ? '-' : `${toThousands(rowData.decRate2)}%`} placement="top">{rowData.decRate1 == '-' ? '-' : `${toThousands(rowData.decRate1)}%`}</ElTooltip>
            )
        }
    ],
    rowClass: ({ rowData }) => {
        if ((rowData.id.split('.')[0]) % 2 == 0) {
            return "zs-el-table-row-gray";
        }
    },
});

const CustomizedHeader = ({ cells, columns, headerIndex }) => {
    console.log(headerIndex)
    const groupCells = [];
    let month = 1
    for (let i = 0, len = columns.length; i < len; i++) {
        if ((i + 1 - 2) % 3 === 1) {
            const width = cells[i].props.column.width + cells[i + 1].props.column.width + cells[i + 2].props.column.width;
            groupCells.push(
                <div style={{ width: `${width}px`, borderLeft: '1px solid #ffffff', borderRight: '1px solid #ffffff', }}>
                    <div style={{ width: `${width}px`, height: '36px', background: '#f5f4f5', borderRight: '1px solid #ffffff', borderBottom: '1px solid #ffffff', display: 'flex', justifyContent: 'center', alignItems: 'center' }}>{props.year}年{month}月</div>
                    <div style="display:flex; height: 36px">{cells[i]}{cells[i + 1]}{cells[i + 2]}</div>
                </div >)
            i = i + 2
            month++
        }
        else { groupCells.push(cells[i]) }
    }
    return groupCells;
}
const getList = () => {
    tableData.loading = true
    detailApi.monthDetailApi({ biProjectCode: props.biProjectCode, year: props.year }).then((res) => {
        if (res.data.code == 200) {
            tableData.data = res.data.data
            tableData.loading = false
            res.data.data.map(item => {
                expandedRowKeys.value.push(item.id)
                if (item.children) {
                    item.children.map(child => {
                        expandedRowKeys.value.push(child.id)
                    })
                }
            })
        }
    })
}

getList()
</script>

<style scoped lang="scss"></style> -->
